<template>
  <div class="base">
    <Card :dis-hover="true">
      <Form ref="form_data" :model="form_data" :rules="rule_form_data">
        <FormItem label="应用名称" prop="app_name">
          <Input v-model="form_data.app_name" placeholder="应用名称"></Input>
        </FormItem>
        <FormItem label="高德地图key" prop="map_key">
          <Input v-model="form_data.map_key" placeholder="高德地图key"></Input>
        </FormItem>
        <FormItem label="助力分享红包分成比例" prop="share_ratio">
          <Input v-model="form_data.share_ratio" placeholder="助力分享红包分成比例">
            <span slot="append">%</span>
          </Input>
        </FormItem>
        <FormItem label="最低红包总额限制(红包总额低于设置金额则不可以发红包，0=不限制)" prop="low_red_money">
          <Input v-model="form_data.low_red_money" placeholder="最低红包总额限制(红包总额低于设置金额则不可以发红包，0=不限制)"></Input>
        </FormItem>
        <FormItem label="是否对外开放发红包功能" prop="open_send">
          <i-switch v-model="form_data.open_send" />
          <p class="red-access-person" v-if="!form_data.open_send">
            <router-link to="setting-red-access">可发红包用户列表</router-link>
          </p>
        </FormItem>
        <FormItem label="是否开启公众号关注功能" prop="open_attention">
          <i-switch v-model="form_data.open_attention" />
        </FormItem>
        <FormItem label="发红包是否提示用户关注公众号" prop="hint_attention">
          <i-switch v-model="form_data.hint_attention" />
        </FormItem>
        <FormItem label="敏感词" prop="sensitive_word">
          <Input v-model="form_data.sensitive_word" type="textarea" placeholder="敏感词，请用英文字符“;”分割，如（转发;分享;政府）"></Input>
        </FormItem>
        <FormItem label="公告" prop="notice">
          <Input v-model="form_data.notice" type="textarea" placeholder="系统公告"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="submit('form_data')">确定</Button>
        </FormItem>
      </Form>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'base-setting',
  data () {
    const validateRatio = (rule, value, callback) => {
      if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
        callback(new Error('请输入正确的百分比'))
      } else {
        callback()
      }
    }
    const validateLowRedMoney = (rule, value, callback) => {
      if (!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/.test(value)) {
        callback(new Error('请输入正确的金额'))
      } else {
        callback()
      }
    }
    return {
      // 原公告内容，检测是否修改过公告
      source_notice: '',
      form_data: {
        app_name: '有趣红包',
        open_send: false,
        open_attention: false,
        hint_attention: false,
        map_key: '',
        sensitive_word: '',
        notice: '',
        share_ratio: '1.00',
        low_red_money: '0.00'
      },
      rule_form_data: {
        app_name: [
          { required: true, message: '请输入应用名称', trigger: 'blur' },
          { type: 'string', max: 8, message: '字数不能大于8', trigger: 'blur' }
        ],
        map_key: [
          { required: true, message: '请输入高德地图key', trigger: 'blur' },
          { len: 32, message: '请输入正确的key', trigger: 'blur' }
        ],
        notice: [
          { max: 255, message: '公告字数不能大于255', trigger: 'blur' }
        ],
        share_ratio: [
          { validator: validateRatio, trigger: 'blur' }
        ],
        low_red_money: [
          { validator: validateLowRedMoney, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    data () {
      let { app_name, open_send, open_attention, hint_attention, map_key, sensitive_word, notice, share_ratio, low_red_money } = this.form_data
      let data = {
        app_name,
        open_send: open_send ? '1' : '0',
        open_attention: open_attention ? '1' : '0',
        hint_attention: hint_attention ? '1' : '0',
        map_key,
        sensitive_word,
        notice,
        share_ratio,
        low_red_money
      }
      if (notice !== this.source_notice) {
        data.notice_time = parseInt(new Date().getTime() / 1000)
      }
      return data
    }
  },
  mounted () {
    this.find()
  },
  methods: {
    // Run
    /**
     * 获取参数
     */
    find () {
      this.$get('setting/find')
        .then((res) => {
          let { code, data } = res.data
          if (code === 0) {
            let { app_name, open_send, open_attention, hint_attention, map_key, sensitive_word, notice, share_ratio, low_red_money } = data
            this.form_data = {
              app_name,
              open_send: open_send === '1',
              open_attention: open_attention === '1',
              hint_attention: hint_attention === '1',
              map_key,
              sensitive_word,
              notice,
              share_ratio,
              low_red_money
            }
          }
        })
    },

    // Handle
    /**
     * 提交设置参数
     */
    submit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post('setting/set', {
            data: this.data
          })
            .then((res) => {
              if (res.data.code === 0) {
                this.$Message.success('设置成功')
              } else {
                this.$Message.error('设置失败')
              }
            })
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .red-access-person{
    display: inline-block;
    height: 40px;
    margin-left: 10px;
    color: #2D8CF0;
    cursor: pointer;
    user-select: none;
  }
</style>
